<template>
	<view class="container">
		<swiper class="banner-swiper" circular autoplay :interval="5000" :duration="1000">
			<swiper-item class="banner-swiper-item" v-for="(item, index) in swipers" :key="index">
				<image :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="entrance">
				<view class="item" @tap="goTicket">
					<image src="/static/images/index/zq.png" class="icon"></image>
					<view class="title">门票</view>
				</view>
				<view class="item" @tap="goMemberCard">
					<image src="/static/images/index/wm.png" class="icon"></image>
					<view class="title">会员卡</view>
				</view>
			</view>
			<view class="info">
				<view class="integral_section" @tap="integrals">
					<view class="top">
						<text class="title">我的积分</text>
						<text class="value">{{ isLogin ? userInfo.integral : '0' }}</text>
					</view>
					<view class="bottom">
						所在城市|{{ currentLocation.localCity }}
						<view class="iconfont iconarrow-right"></view>
					</view>
				</view>
				<view class="qrcode_section" @tap="memberCode">
					<image src="/static/images/index/qrcode.png"></image>
					<text>会员码</text>
				</view>
			</view>
			<!-- <view class="navigators">
				<view class="left">
					<view class="grid flex-column just-content-center">
						<view class="d-flex align-items-center">
							<image src="/static/images/index/csc.png" class="mark-img"></image>
							<view class="font-size-sm text-color-base">百货商城</view>
						</view>
						<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">优选周边商城</view>
					</view>
					<view class="grid justify-content-end align-items-end">
						<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
					</view>
				</view>
				<view class="right">
					<view class="tea-activity" @tap="invite">
						<image src="/static/images/index/mcsb.png" class="mark-img"></image>
						<view>邀请好友</view>
						<view class="right-img">
							<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="member-gifts" @tap="packages">
						<image src="/static/images/index/hyjb.png" class="mark-img"></image>
						<view>会员劵包</view>
						<view class="right-img">
							<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view> -->
			<!--新闻列表-->
			<view class="tui-news-view">
				<block v-for="(item,index) in newsList" :key="index">
					<tui-list-cell :index="index" :unlined="count==index">
						<view class="tui-news-flex" :class="[item.isVideo || item.imgNum>1 ?  'tui-flex-column':'tui-flex-start']">
							<view class="tui-news-picbox" :class="[item.isVideo || item.imgNum>1?'tui-w-full':'tui-w220 tui-h165',item.imgNum>1?'tui-flex-between':'']"
							 v-if="item.imgNum>0">
								<block v-for="(items,index2) in item.thumb" :key="index2">
									<image :src="items" mode="widthFix" class="tui-block" :class="[item.imgNum>1?'tui-one-third':'',item.isVideo?'tui-w-full':'']"></image>
								</block>
								<view class="tui-btm-badge" v-if="item.isVideo || item.imgNum>3">{{item.isVideo?item.duration:item.imgNum+'图'}}</view>
								<view class="tui-video" v-if="item.isVideo">
									<tui-icon name="play" color="#fff" :size="24"></tui-icon>
								</view>
							</view>
							<view class="tui-news-tbox tui-flex-column tui-flex-between" :class="[item.imgNum===1 && !item.isVideo?'tui-h165 tui-pl-20':'']">
								<view class="tui-news-title" :class="[(!item.isVideo && item.imgNum===1)|| item.imgNum===0?'':'tui-pt20']">{{item.title}}</view>
								<view class="tui-sub-box" :class="[!item.isVideo && item.imgNum===1?'':'tui-pt20']">
									<view class="tui-sub-source">{{item.source}}</view>
									<view class="tui-sub-cmt">
										<view>{{item.views}}阅读</view>
										<view class="tui-scale">
											<tui-tag padding="10rpx 24rpx"  :plain="true" shape="circleRight" v-if="item.isTop">置顶</tui-tag>
										</view>
									</view>
								</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
			
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,mapActions
	} from 'vuex'
	import {
		articleList
	} from "@/api/article.js";
	export default {
		data() {
			return {
				swipers: [
					"http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/1baeee01a05a273297c65145c2b6398b.jpg",
					"http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/a2da1787914b4605e625b14c920a9755.jpg"
				],
				newsList: []
			}
		},
		onLoad: function(options) {
			this.getArticleList();
			setTimeout(() => {
				this.getCurrentLocation()
			}, 50)
			
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo','currentLocation'])
		},
		methods: {
			...mapActions(['getCurrentLocation']),
			getArticleList() {
				let that = this;
				articleList(1,10).then(res => {
					let data = res.data.records;
					this.newsList = data.map(function( item ) {
						item.thumb = item.thumb.split(',');
						item.imgNum = item.thumb.length;
					    return item;
					});
				});
			},
			goTicket() {
				uni.switchTab({
					url: '/pages/tabbar/ticket/index'
				})
			},
			goMemberCard() {
				uni.navigateTo({
					url: "/pages/member/vip/index"
				})
			},
			integrals() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/integrals/integrals'
				})
			},
			packages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			memberCode() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: "/pages/member/code"
				})
			},
			invite() {
				uni.navigateTo({
					url: '/pages/activities/invite'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */

	.banner-swiper {
		width: 100%;
		height: 600rpx;

		.banner-swiper-item {
			image {
				width: 100%;
			}
		}
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
		position: relative;
	}

	.entrance {
		position: relative;
		margin-top: -80rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				width: 1rpx;
				background-color: #ddd;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}

			.icon {
				width: 100rpx;
				height: 100rpx;
				margin: 20rpx;
			}

			.title {
				font-size: 30rpx;
				color: $text-color-base;
				font-weight: 600;
			}
		}
	}

	.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				display: flex;
				align-items: center;

				.title {
					color: $text-color-base;
					font-size: $font-size-base;
					margin-right: 10rpx;
				}

				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;
			}
		}

		.qrcode_section {
			color: $color-primary;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.navigators {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 20rpx;
		display: flex;
		align-items: stretch;

		.left {
			width: 340rpx;
			margin-right: 20rpx;
			display: flex;
			padding: 0 20rpx;
			flex-direction: column;
			font-size: $font-size-sm;
			color: $text-color-base;
			background-color: #F2F2E6;

			.grid {
				height: 50%;
				display: flex;
			}
		}

		.right {
			width: 290rpx;
			display: flex;
			flex-direction: column;

			.tea-activity,
			.member-gifts {
				width: 100%;
				display: flex;
				padding: 20rpx;
				font-size: $font-size-sm;
				color: $text-color-base;
				align-items: center;
				position: relative;
			}

			.tea-activity {
				background-color: #FDF3F2;
				margin-bottom: 20rpx;
			}

			.member-gifts {
				background-color: #FCF6D4;
			}

			.right-img {
				flex: 1;
				position: relative;
				margin-left: 20rpx;
				margin-right: -20rpx;
				margin-bottom: -20rpx;
				display: flex;
				align-items: flex-end;

				image {
					width: 100%;
				}
			}
		}

		.mark-img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.member-news {
		width: 100%;
		margin-bottom: 30rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.title {
				font-size: $font-size-lg;
				font-weight: bold;
			}

			.iconfont {
				font-size: 52rpx;
				color: $text-color-assist;
			}
		}

		.list {
			width: 100%;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				height: 240rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}

				.title {
					position: relative;
					font-size: 32rpx;
					font-weight: 500;
					width: 100%;
					top: -70rpx;
					left: 16rpx;
					color: #ffffff;
				}
			}
		}
	}
	.tui-news-flex {
		width: 100%;
		display: flex;
	}
	
	.tui-flex-start {
		align-items: flex-start !important;
	}
	
	.tui-flex-center {
		align-items: center !important;
	}
	
	.tui-flex-column {
		flex-direction: column !important;
	}
	
	.tui-flex-between {
		justify-content: space-between !important;
	}
	
	.tui-news-cell {
		display: flex;
		padding: 20rpx 30rpx;
	}
	
	.tui-news-tbox {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}
	
	.tui-news-picbox {
		display: flex;
		position: relative;
	}
	
	.tui-w220 {
		width: 220rpx;
	}
	
	.tui-h165 {
		height: 165rpx;
	}
	
	.tui-block {
		display: block;
	}
	
	.tui-w-full {
		width: 100%;
	}
	
	.tui-one-third {
		width: 33%;
	}
	
	.tui-news-title {
		width: 100%;
		font-size: 34rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		box-sizing: border-box;
	}
	
	.tui-pl-20 {
		padding-left: 20rpx;
	}
	
	.tui-pt20 {
		padding-top: 20rpx;
	}
	
	.tui-sub-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		box-sizing: border-box;
		line-height: 24rpx;
	}
	
	.tui-sub-source {
		font-size: 26rpx;
	}
	
	.tui-sub-cmt {
		font-size: 24rpx;
		line-height: 24rpx;
		display: flex;
		align-items: center;
	}
	
	
	.tui-scale {
		transform: scale(0.6);
		transform-origin: center center;
	}
	
	.tui-btm-badge {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 12rpx;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20;
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}
	
	.tui-video {
		position: absolute;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transform-origin: 0 0;
	}
	
	.tui-icon {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 26rpx;
	}
</style>